<template>
	<view class="tabBtnBox">
		<view class="tabBtnBoxBigBox" v-for="(item, index) in modelData" :key="index" :class="initIndex == index ? 'titleBoxcenterClick' : ''" @tap="tap(index)">
			<view>
				<view class="tabBtnBoxBigBoxTitle">{{ item.label }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		modelData: {
			type: Array,
			default() {
				return [];
			}
		},
		initIndex: {
			type: [Number, String],
			default: 0
		},
		bgc: {
			type: String,
			default: '#cd001b'
		},
		color: {
			type: String,
			default: '#333'
		},
		height: {
			type: String,
			default: '16px'
		},
		size: {
			type: String,
			default: '12px'
		}
	},
	data() {
		return {
			// activeIndex: 0 //默认索引
		};
	},
	methods: {
		tap(index) {
			if (index !== this.initIndex) {
				this.$emit('change', index);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.tabBtnBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 15px;
	.tabBtnBoxBigBox {
		width: 220rpx;
		height: 40px;
		border-radius: 20px;
		background-color: #fff;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
		color: #cbcbcb;
		margin-bottom: 10px;
		display: flex;
		justify-content: center;
		align-items: center;

		.tabBtnBoxBigBoxTitle {
			padding: 0 30rpx;
			line-height: 15px;
			font-size: $uni-font-size-custom-e;
			text-align: center;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2; // 多行在这里修改数字即可
			overflow: hidden;
			-webkit-box-orient: vertical;
		}
	}
	.titleBoxcenterClick {
		color: #fff;
		background-color: #cd001b;
	}
}
</style>
